<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="专题详情" />
		<not-detail v-if="pageDelete" title="未查询到任何内容，可能已被下架" />
		<view class="container" v-if="details.specialSubjectId">
			<datum-info v-if="details.specialSubjectId" :innerData="details" layoutType="0" />
			<view v-for="(items, index) in infoList" :key="index">
				<view class="space-block"></view>
				<view class="datum-list fboxCol Ycenter Xcenter">
					<view class="title fboxRow w690 font28 color-36363A">
						<view class="flex1 fwb">{{items.specialSubjectPlateName}}</view>
						<view class="more font22 color-9899A1 fboxRow Ycenter" @tap="goList(items)">
							全部<text class="bksCIcon bks-c-ziyuan19right font20"></text></view>
					</view>
					<block v-for="(item, index) in details.materialsInfos">
						<block v-if="item.specialSubjectPlateId == items.specialSubjectPlateId">
							<view class="datum w690" @tap="pageto(item)">
								<view class="fboxRow Xcenter">
									<view class="title flex1 color-36363A font28">{{item.materialsName}}</view>
									<view class="look font24 color-00C15D">查阅</view>
								</view>
								<view class="fboxRow Ycenter font24 mt20">
									<view class="pice flex1 color-9899A1">
										<template v-if="sys.platform == 'ios'">
											{{item.price == 0 ? '免费' : '--'}}</template>
										<template v-else>
											原价：{{item.price == 0 ? '免费' : '￥'+item.price}}
										</template>
									</view>
									<view class="date font22 color-969699">{{item.gmtModified}}</view>
								</view>
							</view>
						</block>
					</block>
				</view>
			</view>
			<view class="space-block"></view>
			<view class="datum-intr w750">
				<view class="title font28 fwb">专题描述</view>
				<view v-if="!details.remark" class="font28 color-323233">暂无描述</view>
				<block v-else>
					<rich-text :nodes="details.remark"
						style="line-height: 52rpx; font-size:28rpx;color:#323233"></rich-text>
				</block>
			</view>
			<BottomAction :back="modalBack" :innerData="details" type="topic" />
		</view>
	</view>
</template>

<script>
	import {
		topicDetails
	} from '@/api/bks.datum.js';
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import notDetail from '@/pagesBKS/components/not-detail.vue';
	import datumInfo from './components/datum-info.vue';
	import BottomAction from './components/bottom-action.vue'
	export default {
		components:{headerCustom, notDetail, datumInfo, BottomAction},
		props: {},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				details: {},
				pageDelete: false,
				infoList: [],
				sys: {},
				modalBack: false // 专题和资料相互跳转对其进行返回处理
			}
		},
		onLoad(option) {
			if(option.id){
				this.materialsId = option.id
				this.getDetail()
			}
			if(option && option.back){
				this.modalBack = true
			}
			try{
				this.sys = uni.getSystemInfoSync();
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			// 获取资料详情
			getDetail() {
				topicDetails({
					specialSubjectId: this.materialsId
				}).then(res => {
					console.log(res)
					const remark = res.data.remark ? res.data.remark.replace(/\<img/gi,
						'<img style="max-width:100%;margin-top:10px;height:auto;display:block;"') : res.data.remark;
					res.data.remark = remark
					const list = new Map()
					res.data.materialsInfos.filter(item => {
						const value =list.get(item.specialSubjectPlateId)
						if (!value) {
							list.set(item.specialSubjectPlateId, item)
						// }else{
						// 	value.push(item)
						// 	console.log(value)
						// 	list.set(item.specialSubjectPlateId, value)
						}
					})
					const newList = []
					for(let item of list){
						newList.push(item[1])
					}
					this.infoList = newList
					this.details = res.data
				}).catch(err => {
					this.pageDelete = true
				})
			},
			// 跳转资料详情
			pageto(e) {
				const {
					materialsId,
					format
				} = e
				this.$pageTo('/bks/datum/detail/index', {
					id:materialsId,
					format,
					type: 'datum'
				})
			},
			goList(e) {
				const {
					specialSubjectPlateId,
					specialSubjectPlateName
				} = e
				this.$pageTo('/bks/datum/subList/index', {
					specialSubjectPlateId: specialSubjectPlateId,
					specialSubjectId: this.details.specialSubjectId,
					title: specialSubjectPlateName
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.datum-list{padding: 30rpx 0;}
.datum{padding: 30rpx;margin-top: 20rpx; width: 690rpx;background: #F5FAF7;border-radius: 8rpx;}


.datum-intr{padding: 30rpx;}
.datum-intr .title{margin-bottom: 20rpx;}
</style>